<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>jscript08이벤트처리</title>
 </head>
 <body>
	<h1>이벤트처리</h1>
	<h3>이벤트 발생시 특정코드를 실행할 수 있음</h3>
	<p>이벤트 종류</p>
	<p>onclick : 객체를 클릭했을때</p>
	<p>onload : 브라우저를 통해 문서가 읽혀진 후</p>
	<p>onsubmit : submit 버튼을 클릭했을때</p>
	<p>onfocus : 객체에 포커스를 받을때</p>
	<p>onblur : 객체가 포커스를 잃을때</p>
	<p>onkeyup : 키를 누른후 손을 놓을때</p>

	<h3>이벤트 추가</h3>
	<p>인라인 이벤트로 추가 (비추) : 
			html 태그에 on~ 속성을 이용 </p>
	<p>객체의 이벤트 속성으로 추가 (무난하게 추천!) : 
			객체.on~ = function() { }; </p>
	<p>이벤트 리스너를 이용 (웹 표준, 적극추천!) :
		객체.addEventListener("이벤트", 함수, 버블링여부); </p>
	<hr />
	<h1></h1>
	<h1></h1>
	<button id="btn1">객체의 이벤트 속성으로 처리</button>
	<button id="btn2">이벤트 리스너로 처리</button>

	<div>
		<input type="text" name="uid" />
		<button id="btn3">입력완료</button>
		<span id="txtlength"></span>
	</div>

	<div id="box" 
		style="width:250px; height:100px; 
		background: red; color: white; 
		font-weight: bold; font-size: 1.5em;
		text-align:center; padding-top:85px">
		마우스를 올려보세요!</div>

	<script type="text/javascript">
		var btn1 = document.getElementById("btn1");
		btn1.onclick = function() { say1(); };

		var btn2 = document.getElementById("btn2");
		btn2.addEventListener( "click", say2, true );
		//btn2.attachEvent( "onclick", say2 );	// IE8이하

		var btn3 = document.getElementById("btn3");
		btn3.addEventListener( "click", sayuid, true );

		var box = document.getElementById("box");
		box.addEventListener(
						"mouseover", box1, true );
		box.addEventListener(
						"mouseout", box2, true );

		var input = document.
			getElementsByTagName("input");
		input[0].addEventListener("keyup", say3, true);

		function say1() { 
			var h1s = document
						.getElementsByTagName("h1");
			h1s[1].innerHTML += "객체 속성 이벤트";
		}

		function say2() { 
			var h1s = document
						.getElementsByTagName("h1");
			h1s[2].innerHTML += "이벤트 리스너";
		}

		function sayuid() {
			var uid = document
				.getElementsByName("uid");
			if ( uid[0].value == "" ) {
				alert("아이디를 입력하세요!");
				uid[0].focus();
			}
		}

		function box1() {
			box.innerHTML = "이글이 보이나요?";
		}
		function box2() {
			box.innerHTML = "마우스를 올려보세요!";
		}

		function say3() {
			var txt = document
				.getElementById("txtlength");
			txt.innerHTML = input[0].value.length;
		}

		// 문서가 다 읽혀지면 
		// 브라우저가 문서를 다 읽었을때 
		window.onload = 
			function() { alert("문서 모두 읽음"); };
		//

	</script>

 </body>
</html>
